<template>
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
    <div class="grid-container">
      <el-form-item label="订单编号">
        <el-input v-model="state.dataForm.orderNum" type="text" clearable placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-select v-model="state.dataForm.type" placeholder="请选择" clearable>
          <el-option label="早鸟展会包" value="1"></el-option>
          <el-option label="地区客源包" value="2"></el-option>
          <el-option label="历届展会包" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="state.dataForm.company" type="text" clearable placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="账号" >
        <el-input v-model="state.dataForm.phone" type="text" clearable placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-select v-model="state.dataForm.payType" placeholder="请选择" clearable>
          <el-option label="线上支付" value="1"></el-option>
          <el-option label="线下支付" value="7"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="form">
      <div style="display: flex;">
        <el-form-item label="支付日期">
          <el-date-picker type="date" placeholder="开始时间" style="width: 120px"
                          v-model="state.dataForm.startDate" value-format="YYYY-MM-DD"></el-date-picker>
          <span style="margin-top: -14px;margin-left: 10px;margin-right: 10px;">___</span>
          <el-date-picker type="date" placeholder="结束时间" style="width: 120px"
                          v-model="state.dataForm.endDate" value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>
      </div>
      <div>
        <!--新增-->
        <el-form-item>
          <el-button @click="addOrUpdateHandle()"
                     style="background: rgba(22, 119, 255, 1);color: #fff;width: 100px;border-radius: 5px;">新增订单</el-button>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
          <el-button @click="queryData"
                     style="background: rgba(22, 119, 255, 1);color: #fff;border-radius: 5px;">{{
              $t("query") }}</el-button>
        </el-form-item>
        <!-- 重置 -->
        <el-form-item>
          <el-button @click="resetForm"
                     style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
        </el-form-item>
      </div>
    </div>
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
              v-loading="state.dataListLoading" :data="state.dataList" border
              @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column align="center" prop="orderNum" label="订单编号" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="productName" label="产品名称" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="company" label="公司名称" width="280" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="userPhone" label="账号" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="payType" label="支付方式" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="payAmount" label="支付金额" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="updateTime" label="支付时间" width="280" show-overflow-tooltip></el-table-column>

      <el-table-column fixed="right" align="center" prop="readOnly" label="操作" >
        <template v-slot="scope">
          <el-button  link style="color: rgba(56, 56, 56, 1);" @click="check(scope.row.orderNum)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
                 :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
                 @current-change="state.pageCurrentChangeHandle"> </el-pagination>

  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRoute, useRouter } from "vue-router";
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, onMounted, onActivated } from "vue";
import router from "@/router";
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";


const view = reactive({
  getDataListURL: '/noc/nocorder/orderList',
  getDataListIsPage: true,
  dataForm: {
    orderNum: "",
    type:"",
    seriesName: "",
    productName: "",
    company: "",
    phone: "",
    startDate: "",
    endDate: "",
    payType:""
  },

});
// 分类选项
const classOptions = ref<any[]>([]);
// 选中的分类路径
const selectedClassPath = ref<string[]>([]);
// 状态多选值
const selectedStatus = ref([]);
const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;

// 修改查询按钮的点击处理
const queryData = () => {
  saveCurrentQuery();
  state.page = 1; // 重置页码到第一页
  state.getDataList();
};

// 修改重置方法以清除保存的查询条件
const resetForm = () => {
  view.dataForm.orderNum = "";
  view.dataForm.type = "";
  view.dataForm.seriesName = "";
  view.dataForm.productName = "";
  view.dataForm.company = "";
  view.dataForm.phone = "";
  view.dataForm.startDate = "";
  view.dataForm.endDate = "";
  view.dataForm.payType = "";
  // 重置状态多选值
  selectedStatus.value = [];
  // 重置级联选择器的值
  selectedClassPath.value = [];
  // 清除保存的查询条件
  sessionStorage.removeItem('nocproductListQuery');
  state.page = 1; // 重置页码到第一页
  state.getDataList();
};

// 在执行查询前保存当前查询条件
const saveCurrentQuery = () => {
  const query = {
    dataForm: { ...state.dataForm },
    selectedStatus: [...selectedStatus.value],
    selectedClassPath: [...selectedClassPath.value]
  };
  sessionStorage.setItem('nocproductListQuery', JSON.stringify(query));
};
onActivated(() => {
  // 每次从别的页面跳回来都会触发
  state.page = 1;
  state.getDataList();
});
// 在 onMounted 中添加
const route = useRoute();
onMounted(() => {
  getClassList();

  // 检查是否是从编辑页面返回
  if (route.query.fromEdit === 'true') {
    // 从编辑页面返回，恢复查询条件
    const savedQuery = sessionStorage.getItem('nocproductListQuery');
    if (savedQuery) {
      try {
        const query = JSON.parse(savedQuery);
        Object.assign(state.dataForm, query.dataForm);
        selectedStatus.value = query.selectedStatus || [];
        selectedClassPath.value = query.selectedClassPath || [];
      } catch (e) {
        console.error('解析查询条件失败', e);
      }
    }
  }
  state.getDataList();
});
// 跳转新增产品系列页面
const addOrUpdateHandle = () => {
  saveCurrentQuery(); // 保存当前查询条件
  router.push({
    path: "/program/nocorder-add",
    query: {
      from: "/program/nocorder-list"
    }
  });
};
// 跳转查看页面
const check = (orderNum: string) => {
  router.push({
    path: "/program/nocorder-view",
    query: {
      orderNum,
      from: "/program/nocorder-list"
    }
  });
};
// 获取分类列表
const getClassList = () => {
  baseService.get('/noc/nocclassify/list2').then(res => {
    // 确保数据结构符合级联选择器要求
    classOptions.value = res.data;
    console.log('分类数据加载成功:', classOptions.value);
  }).catch(error => {
    console.error('获取分类数据出错:', error);
    ElMessage.error('获取分类数据出错');
  });
};



</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap;
}

.el-input {
  width: 218px;
  height: 32px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}
.form{
  display: flex;
  justify-content: space-between;
}
.grid-container{
 justify-content: space-between;
  display: flex;
}
</style>
